<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
    <meta name='mobile-web-app-capable' content='yes'>
    <link href="/static/img/logo500x500.png" rel="shortcut icon" sizes="500x500">
    <meta name='apple-mobile-web-app-capable' content='yes'>
    <link rel='stylesheet' href='/static/css/xr_common.css'>

    <title>全景浏览</title>
  </head>
  <body>
    <header>
      <details open>
        <summary th:text="${house.getTitle()}">房屋标题</summary>
        <p th:text="${house.getInf()}">
          房屋描述
          <a class="back" href="..">返回</a>
        </p>
      </details>
    </header>
    <script type="module" th:inline="javascript">
      import {WebXRButton} from '/static/js/util/webxr-button.js';
      import {Scene, WebXRView} from '/static/js/render/scenes/scene.js';
      import {Renderer, createWebGLContext} from '/static/js/render/core/renderer.js';
      import {SkyboxNode} from '/static/js/render/nodes/skybox.js';
      import {InlineViewerHelper} from '/static/js/util/inline-viewer-helper.js';
      import {QueryArgs} from '/static/js/util/query-args.js';


      // If requested, use the polyfill to provide support for mobile devices
      // and devices which only support WebVR.
      import WebXRPolyfill from '/static/js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
      if (QueryArgs.getBool('usePolyfill', true)) {
        let polyfill = new WebXRPolyfill();
      }

      // XR globals.
      let xrButton = null;
      let xrImmersiveRefSpace = null;
      let inlineViewerHelper = null;

      // WebGL scene globals.
      let gl = null;
      let renderer = null;
      let scene = new Scene();
      scene.addNode(new SkyboxNode({
        url: [[${house.getMainImage()}]],
        displayMode: 'stereoTopBottom'
      }));

      function initXR() {
        xrButton = new WebXRButton({
          textEnterXRTitle:"进入沉浸浏览",
          textExitXRTitle:"退出沉浸浏览",
          onRequestSession: onRequestSession,
          onEndSession: onEndSession
        });
        document.querySelector('header').appendChild(xrButton.domElement);

        if (navigator.xr) {
          navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
            xrButton.enabled = supported;
          });

          navigator.xr.requestSession('inline').then(onSessionStarted);
        }
      }

      function initGL() {
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
        if (gl)
          return;

        gl = createWebGLContext({
          xrCompatible: true
        });
        document.body.appendChild(gl.canvas);

        function onResize() {
          gl.canvas.width = gl.canvas.clientWidth * window.devicePixelRatio;
          gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio;
        }
        window.addEventListener('resize', onResize);
        onResize();

        renderer = new Renderer(gl);
        scene.setRenderer(renderer);
      }

      function onRequestSession() {
        return navigator.xr.requestSession('immersive-vr').then((session) => {
          xrButton.setSession(session);
          session.isImmersive = true;
          onSessionStarted(session);
        });
      }

      function onSessionStarted(session) {
        session.addEventListener('end', onSessionEnded);

        initGL();
        scene.inputRenderer.useProfileControllerMeshes(session);

        let glLayer = new XRWebGLLayer(session, gl);
        session.updateRenderState({ baseLayer: glLayer });

        // When rendering 360 photos/videos you want to ensure that the user's
        // head is always at the center of the rendered media. Otherwise users
        // with 6DoF hardware could walk towards the edges and see a very skewed
        // or outright broken view of the image. To prevent that, we request a
        // 'position-disabled' reference space, which suppresses any positional
        // information from the headset. (As an added bonus this mode may be
        // more power efficient on some hardware!)
        let refSpaceType = session.isImmersive ? 'local' : 'viewer';
        session.requestReferenceSpace(refSpaceType).then((refSpace) => {
          if (session.isImmersive) {
            xrImmersiveRefSpace = refSpace;
          } else {
            inlineViewerHelper = new InlineViewerHelper(gl.canvas, refSpace);
          }
          session.requestAnimationFrame(onXRFrame);
        });
      }

      function onEndSession(session) {
        session.end();
      }

      function onSessionEnded(event) {
        if (event.session.isImmersive) {
          xrButton.setSession(null);
        }
      }

      function onXRFrame(t, frame) {
        let session = frame.session;
        let refSpace = session.isImmersive ?
                         xrImmersiveRefSpace :
                         inlineViewerHelper.referenceSpace;
        let pose = frame.getViewerPose(refSpace);

        scene.startFrame();

        session.requestAnimationFrame(onXRFrame);

        let glLayer = session.renderState.baseLayer;
        gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        if (pose) {
          let views = [];
          for (let view of pose.views) {
            let renderView = new WebXRView(view, glLayer);

            // It's important to take into account which eye the view is
            // associated with in cases like this, since it informs which half
            // of the stereo image should be used when rendering the view.
            renderView.eye = view.eye
            views.push(renderView);
          }

          scene.updateInputSources(frame, refSpace);

          scene.drawViewArray(views);
        }

        scene.endFrame();
      }

      // Start the XR application.
      initXR();
    </script>
  </body>
</html>
